<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      
    <style>
        .active{
          background-color: red;
        }

        ul{
            list-style: none;
            vertical-align:middle;
        }

        li{
            float: left;
            width: 99px;
            height: 39px;
            text-align: center;
            line-height: 39px;
        }

      </style>
      
        <!-- 作业需求：点击列表中的哪一项，那么该项的文字变成红色 -->
      <div id="app">
          <ul>
              <li v-for="(item, index) in movices" :class="{active:index==mark}" @click="getcolor(index)">{{ item }}</li>
          </ul>
      </div>
      
      <script src="vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            mark : -1,
            movices: ['教父','阿甘正传','楚门的世界','盗梦空间']
          },
          methods: {
            getcolor: function(index) {
              if(index == this.mark){
                this.mark = -1 // if判断，实现点击一项时变色，再次点击，取消变色
              }else{
                this.mark = index
              }
              
            }
          }
        })
      </script>

</body>
</html>